<!-- 当命名空间开启后，组件中访问store中的数据时，
 出现backend.js:5188 [vuex] unknown action type: add 
 解决办法：
 1. 命名空间关闭
2.在mapState、mapGetters、mapActions、mapMutations参数中添加模块中注册的组件
 ...mapGetters({ totalAmounts: 'countStore/totalAmount' })namespace: true
  ...mapGetters({ totalAmounts: 'totalAmount' })namespace: false
 -->
 <template>
  <div class="main">
    <div class="card">
      <el-button @click="add(num)">add</el-button>
      <el-button @click="reduce(num)">reduce</el-button>
      <el-button @click="addnew(num)">addnew</el-button>
      <el-button @click="reduceNew(num)">reduceNew</el-button>
      <br />
    </div>
    <div class="texy-center">
      <!-- v-once 只传一次值，接下来都都不显示
       v-show：控制元素是否在页面上显示-->
      <span v-once v-show="false">v-once sum:{{ sums }}</span>
      <br />
      <span> sum:{{ sums }}</span>
      <br />
      <span>totalAmount:{{ totalAmounts }}</span>
    </div>
  </div>
</template>

<script>
import { mapState, mapGetters } from 'vuex'
import { mapMutations, mapActions } from 'vuex'
export default {
  data () {
    return {
      num: 1,
      sum: 0,
      totalAmount: 0
    };
  },
  computed: {
    // sums () {
    //   return this.$store.state.countStore.sum
    // },

    //借助mapState生成计算属性，从state中取数据
    ...mapState({
      sums: state => state.countStore.sum
    }),
    ...mapGetters({ totalAmounts: 'countStore/totalAmount' })
  },
  methods: {

    ...mapMutations({ addnew: 'countStore/ADD', reduceNew: 'countStore/REDUCE' }),//对象写法
    ...mapActions({ add: 'countStore/add', reduce: 'countStore/reduce' }),//对象写法
    // ...mapMutations(['ADD','REDUCE'])，//数组写法
    // ...mapActions(['add','reduce'])，//数组写法

    // add () {
    //   this.$store.dispatch("add", this.num);
    // },
    // reduce () {
    //   this.$store.dispatch("reduce", this.num);
    // },
    // addnew () {
    //   this.$store.commit("ADD", this.num);
    // },
    // reduceNew () {
    //   this.$store.commit("REDUCE", this.num);
    // },
  },

};
</script>


<style scoped>
.main {
  height: auto;
  width: 50%;
  background-color: rgba(255, 255, 255, 0.8); /* 白色半透明 */
}
.card {
  padding: 10px;
  box-sizing: border-box;
  display: flex;

  justify-content: space-between;
  align-items: center;
}

.text-container {
  display: flex;
  align-items: center;
  gap: 1px; /* 间距 */
}
</style>